<template>
  <div class="questions">
    <div class="search">
      <van-search
        @input="onInput"
        v-model="value"
        show-action
        @search="onSearch"
        background="#3296fa"
        placeholder="请输入搜索关键词"
      ></van-search>
    </div>
    <!-- 历史区域 -->
    <div class="hostory" v-if="!value">
      <van-cell title="历史区域">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="delete-o" @click="rightClick" />
        </template>
      </van-cell>
      <ul class="list">
        <li class="listItem" v-for="(item, index) in cellList" :key="index">
          <van-cell>
            <template slot="title">
              <div @click="cellClick(item)">{{ item }}</div>
            </template>
            <template slot="icon">
              <i class="iconfont">&#xe669;</i>
            </template>
            <template>
              <i @click="cellClear(index)">X</i>
            </template>
          </van-cell>
        </li>
      </ul>
    </div>
    <!-- 联想区域 -->
    <div class="hostory" v-else>
      <van-cell title="联想区域"></van-cell>
      <ul class="list">
        <li class="listItem" v-for="(item, index) in options" :key="index">
          <van-cell>
            <!-- <template slot="title">
              <div @click="cellClick(item)" v-html="item"></div>
            </template> -->
            <span v-html="item" @click="cellClick(item)"></span>
            <template slot="icon">
              <i class="iconfont">&#xe669;</i>
            </template>
          </van-cell>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { search, suggestion } from '@/api/questions'
import { getLocal, setLocal, removeLocal } from '@/utils/local.js'
export default {
  name: 'questions',
  data () {
    return {
      value: '', // 输入框内容
      cellList: JSON.parse(getLocal('history') || '[]'), // 历史搜索列表
      options: [], // 联想搜索
      timer: 0, // 联想定时器
      list: []
    }
  },
  created () {},
  methods: {
    // 联想搜索
    // async onInput () {
    //   if (this.value.length > 0) {
    //     const res = await suggestion({ q: this.value })

    //     if (this.value.trim() !== '') {
    //       // this.options.push(...res.data.data.options)
    //       res.data.data.options.forEach(item => {
    //         item = item
    //           .split(this.value)
    //           .join(`<span style = "color:red;">${this.value}</span>`)
    //         return this.options.push(item)
    //       })
    //     }
    //   }
    // },
    onInput () {
      if (this.value.length > 0) {
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          const res = await suggestion({ q: this.value })
          console.log(res)
          const arr = res.data.data.options.map(item => {
            const arr = item.split(this.value)
            item = arr.join(`<span style = "color:red;">${this.value}</span>`)
            return item
          })
          // console.log(arr)
          this.options = arr
          this.list = res.data.data.options
        }, 500)
      }
    },
    // 搜索
    async onSearch () {
      // window.console.log('搜索')
      this.$toast.loading({
        message: '搜索中...',
        forbidClick: true
      })
      const res = await search({ q: this.value })
      // 把搜索历史加入搜索列表
      this.cellList.unshift(res.config.params.q)
      // 去重
      this.cellList = [...new Set(this.cellList)]
      // 保存到本地
      setLocal('history', JSON.stringify(this.cellList))
      // 搜索跳转
      // this.$router.push('/home/result' + '?path=' + this.value)
      this.$router.push('/home/result/' + this.value)
      this.value = ''
      // window.console.log(res)
    },
    // 取消
    onCancel () {
      window.console.log('取消')
      //   Toast.success('成功文案')
    },
    // 历史删除
    rightClick () {
      window.console.log('删除')
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除所有历史数据'
        })
        .then(() => {
          // on confirm
          window.console.log('确认')
          this.cellList = []
          removeLocal('history')
        })
        .catch(() => {
          // on cancel
          window.console.log('取消')
        })
    },
    // 单元格删除
    cellClear (index) {
      this.cellList.splice(index, 1)
      // getLocal('history')
      setLocal('history', JSON.stringify(this.cellList))
    },
    // 单元格内容点击跳转
    cellClick (str) {
      this.value = str
      this.onSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.questions {
  .search {
    background-color: #3296fa;
  }
}
</style>
